<html>

<head>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <p>总价格：{{numPrice}}</p>
        <p>单价：{{price}}/元</p>
        <p>数量：{{num}}/个</p>
        <button @click="num++">增加一个</button>
        <button @click="num==0 ? 0 : num--;">减少一个</button>
    </div>
</body>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            price: 20,
            num: 0,
        },
        computed: {
            numPrice() {
                return this.num * this.price;
            }
        }
    })
</script>

</html>